<template>
  <div class="line-echart">
    <base-echart :options="options"></base-echart>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import baseEchart from "@/base-ui/echarts";

export default defineComponent({
  props: {
    xLabels: {
      type: Array,
      requirt: true,
      defalut: () => [],
    },
    dataSeries: {
      type: Array,
      requirt: true,
      defalut: () => [],
    },
  },
  components: { baseEchart },
  setup(props) {
    const options = {
      xAxis: {
        type: "category",
        data: props.xLabels,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: props.dataSeries,
          type: "line",
        },
      ],
    };
    return {
      options,
    };
  },
});
</script>
